/*
 * @Date: 2022-06-01 11:10:10
 * @LastEditors: 春贰
 * @gitee: https://gitee.com/chun22222222
 * @github: https://github.com/chun222
 * @Desc: 
 * @LastEditTime: 2022-06-01 11:28:44
 * @FilePath: \web\src\directive\module\dragModal.js
 */
export default {
  created(el, bindings, vnode) {
    
  console.log(el, bindings, vnode);
  let { visible, destroyOnClose } = vnode.componentInstance
  // 防止未定义 destroyOnClose 关闭弹窗时dom未被销毁，指令被重复调用
  if (!visible) return
  let modal = el.getElementsByClassName('ant-modal')[0]
  let header = el.getElementsByClassName('ant-modal-header')[0]
  let left = 0
  let top = 0
  // 未定义 destroyOnClose 时，dom未被销毁，关闭弹窗再次打开，弹窗会停留在上一次拖动的位置
  if (!destroyOnClose) {
    left = modal.left || 0
    top = modal.top || 0
  }
  // top 初始值为 offsetTop
  top = top || modal.offsetTop
  // 点击title部分拖动
  header.onmousedown = e => {
    let startX = e.clientX
    let startY = e.clientY
    header.left = header.offsetLeft
    header.top = header.offsetTop
    el.onmousemove = event => {
      let endX = event.clientX
      let endY = event.clientY
      modal.left = header.left + (endX - startX) + left
      modal.top = header.top + (endY - startY) + top
      modal.style.left = modal.left + 'px'
      modal.style.top = modal.top + 'px'
    }
    el.onmouseup = event => {
      left = modal.left
      top = modal.top
      el.onmousemove = null
      el.onmouseup = null
      header.releaseCapture && header.releaseCapture()
    }
    header.setCapture && header.setCapture()
  } 
  },
  beforeMount(el, binding, vnode) {
    console.log(el, binding, vnode);
  },
  mounted() {},
  beforeUpdate(a,b,c,prevNode) { //! 第四个参数 prevNode 只在beforeUpdate和updated才有！
    a.style.background = b.value
  },
  updated() {},
  beforeUnmount() {
    // 当指令绑定的元素 的父组件销毁前调用。  <简单讲，指令元素的父组件销毁前调用>
  },
  unmounted() {},// 当指令与元素解除绑定且父组件已销毁时调用。
} 

// export default function dragmodal(el, bindings, vnode) {
//   console.log(el, bindings, vnode);
//     let { visible, destroyOnClose } = vnode.componentInstance
//     // 防止未定义 destroyOnClose 关闭弹窗时dom未被销毁，指令被重复调用
//     if (!visible) return
//     let modal = el.getElementsByClassName('ant-modal')[0]
//     let header = el.getElementsByClassName('ant-modal-header')[0]
//     let left = 0
//     let top = 0
//     // 未定义 destroyOnClose 时，dom未被销毁，关闭弹窗再次打开，弹窗会停留在上一次拖动的位置
//     if (!destroyOnClose) {
//       left = modal.left || 0
//       top = modal.top || 0
//     }
//     // top 初始值为 offsetTop
//     top = top || modal.offsetTop
//     // 点击title部分拖动
//     header.onmousedown = e => {
//       let startX = e.clientX
//       let startY = e.clientY
//       header.left = header.offsetLeft
//       header.top = header.offsetTop
//       el.onmousemove = event => {
//         let endX = event.clientX
//         let endY = event.clientY
//         modal.left = header.left + (endX - startX) + left
//         modal.top = header.top + (endY - startY) + top
//         modal.style.left = modal.left + 'px'
//         modal.style.top = modal.top + 'px'
//       }
//       el.onmouseup = event => {
//         left = modal.left
//         top = modal.top
//         el.onmousemove = null
//         el.onmouseup = null
//         header.releaseCapture && header.releaseCapture()
//       }
//       header.setCapture && header.setCapture()
//     } 
//   }